<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流程发布</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="$request.getContextPath()/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="$request.getContextPath()/resources/bootstrap-table/css/bootstrap-table.min.css">
<style type="text/css">
.container-fluid{
  padding: 0px;
  margin: 0px;
  width:100%;
  height:100%;
  position: absolute;
}
.container-fluid .bootstrap-table{
  padding: 0px;
  margin: 0px;
  width:100%;
  height:100%;
}
.container-fluid .bootstrap-table .fixed-table-container{
  padding: 0px;
  margin: 0px;
  width:100%;
}
</style>
</head>
<body>
<div class="container-fluid">
		<div id="toolbar">
			<button type="button" class="btn btn-default btn-sm" onclick="addDeployment()">
				<span class="glyphicon glyphicon-plus"></span>添加部署
			</button>
			<button type="button" class="btn btn-default btn-sm" onclick="deploymentDetail()">
				<span class="glyphicon glyphicon-plus"></span>流程详情
			</button>
			<button type="button" class="btn btn-default btn-sm" onclick="deleteDeployment()">
				<span class="glyphicon glyphicon-plus"></span>流程删除
			</button>
		</div>
		<table data-toggle="table"
		    id="table"
		    data-classes="table table-hover"
		    data-toolbar="#toolbar" 
		    data-show-refresh="true"
			data-search="false" 
			data-show-toggle="true" 
			data-show-columns="true"
			data-show-export="true" 
			data-show-export="true"
			data-pagination="true" 
			data-query-params="queryParams"
			data-query-type="limit" 
			data-show-footer="false"
			data-click-to-select="true" 
			data-single-select="false"
			data-striped="true" 
			data-method="get"
			data-url="$request.getContextPath()/process/deployment/page"
			data-side-pagination="server" 
			data-page-list="[10, 25, 50, 100, ALL]"
			data-show-pagination-switch="true" 
			data-id-field="deploymentId"
			data-search-on-enter-key="true" 
			data-pagination-v-align="bottom"
			data-show-pagination-switch="true">
			<thead>
			  <tr>
			     <th data-checkbox="true" data-width="40px"></th>
			     <th data-field="deploymentId" data-width="40px">部署ID</th>
            	 <th data-field="processDefinitionId" data-width="40px">流程ID</th>
                 <th data-field="processDefinitionKey">流程KEY</th>
                 <th data-field="processDefinitionName">流程名称</th>
                 <th data-field="processDefinitionResourceName">图片名称</th>
                 <th data-field="processDefinitionDiagramResourceName">资源名称</th>
                 <th data-field="processDefinitionVersion">版本</th>
                 <th data-field="processDefinitionDescription">流程描述</th>
			  </tr>
			</thead>
		</table>
  </div>
</body>
<script src="$request.getContextPath()/resources/jquery/jquery-3.1.0.min.js"></script>
<script src="$request.getContextPath()/resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/layer/layer.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/bootstrap-table/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
//添加部署
function addDeployment(){
	top.window.layer.open({
		 type: 2, 
		 title :'添加部署',
		 maxmin: true,
		 content: ['../../process/deployment/add','yes'],
		 area: ['300px', '200px'],
		 end:function(){
			var $table = $('#table');    
			$table.bootstrapTable("refresh");
		 }
	});
}
//流程详情
function deploymentDetail(){
	var $table = $('#table');   
	var selections=$table.bootstrapTable("getSelections");
	var imageData=[];
	if(selections!=null&&selections.length>0){
		for(var i=0,len=selections.length;i<len;i++){
			var deploymentId=selections[i].deploymentId;
			var resourceName=selections[i].processDefinitionDiagramResourceName;
			imageData.push({"src": "$request.getContextPath()/process/deployment/resource?deploymentId="+deploymentId+"&resourceName="+resourceName});
		}
	    layer.photos({
		    photos: {
		    	  "title": "流程图", //相册标题
		    	  "start": 0,
		    	  "data": imageData
		    	}
		  });
	}else{
		layer.alert("请选择一行");
	}
}
//删除流程
function deleteDeployment(){
	var $table = $('#table');   
	var selections=$table.bootstrapTable("getSelections");
	var deploymentIds=[];
	if(selections!=null&&selections.length>0){
		for(var i=0,len=selections.length;i<len;i++){
			deploymentIds.push(selections[i].deploymentId);
		}
		layer.confirm('你确定要删除这个流程定义吗', {icon: 3, title:'提示'}, function(index){
    		$.post("$request.getContextPath()/process/deployment/delete",{deploymentIds:deploymentIds.join(","),_method:'delete'},function(data){
    			if(data.code==200){
    				top.layer.msg(data.msg,{
        				icon: 1,
        				skin: 'demo-class',
        				title :'信息',
        				time:500,
        			    area: ['300px', '160px'],
        			    offset: 'rb',
        			    end :function(){
        			    	var $table = $('#table');    
        					$table.bootstrapTable("refresh");
        			    }
        			});
    			}else{
    				layer.alert(data.msg);
    			}
    		});
    	});
	}else{
		layer.alert("请选择一行");
	}
}
//表格查询参数
function queryParams(params) {
    return {
    	beginIndex:params.offset,
    	pageSize:params.limit
    };
}
</script>
</html>